<!DOCTYPE html>
<html>
    <head>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <my-component>
                <template v-slot:default>
                    {{msg}}
                </template>
                <template v-slot:second>
                    <div style="font-size: 40px;">内部结构</div>
                </template>
            </my-component>
        </div>
        <template id="first">
            <div>
                <slot></slot>
                <button @click="showSlots">点击输出slot</button>
                <slot name="second"></slot>
            </div>
        </template>
        <script>
            Vue.component('my-component',{
                template:'#first',
                methods :{
                    showSlots(){
                        console.log(this.$slots.default[0].text);
                    }
                }
            });

            var vm = new Vue({
                el:'#app',
                data : {
                    msg:'这是data当中定义的数据'
                }
            });

            console.log(vm.$children[0].$slots.second[0].children[0].text);
        </script>
    </body>
</html>